@import
	url(http://fonts.googleapis.com/css?family=Give+You+Glory|Rock+Salt);

@import url(shadows.css);

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
	{
	margin: 0;
	padding: 0;
}

.kanbanPanel {
	width: 123em;
	height: 61em;
	padding: 1em;
	background-color: white;
	background-image: 	-moz-repeating-linear-gradient(-45deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   0.1%, hsla(0,0%,100%, .1) 0.15%),					
						-moz-repeating-linear-gradient(-45deg, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   0.05%, hsla(0,0%,  0%,.03) 0.1%),					
						-moz-repeating-linear-gradient(-45deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 0.01%, hsla(0,0%,100%,.15) 0.02%),
						-moz-linear-gradient(-90deg, 	hsl(0,0%,78%)  0%, 
														hsl(0,0%,90%) 47%, 
														hsl(0,0%,78%) 53%,
														hsl(0,0%,70%)100%);						
	
	background-image: 	-ms-repeating-linear-gradient(-45deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   0.1%, hsla(0,0%,100%, .1) 0.15%),					
						-ms-repeating-linear-gradient(-45deg, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   0.05%, hsla(0,0%,  0%,.03) 0.1%),					
						-ms-repeating-linear-gradient(-45deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 0.01%, hsla(0,0%,100%,.15) 0.02%),
						-ms-linear-gradient(-90deg, 	hsl(0,0%,78%)  0%, 
														hsl(0,0%,90%) 47%, 
														hsl(0,0%,78%) 53%,
														hsl(0,0%,70%)100%);					
	
	background-image: 	-o-repeating-linear-gradient(-45deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   0.1%, hsla(0,0%,100%, .1) 0.15%),					
						-o-repeating-linear-gradient(-45deg, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   0.05%, hsla(0,0%,  0%,.03) 0.1%),					
						-o-repeating-linear-gradient(-45deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 0.01%, hsla(0,0%,100%,.15) 0.02%),
						-o-linear-gradient(-90deg, 	hsl(0,0%,78%)  0%, 
														hsl(0,0%,90%) 47%, 
														hsl(0,0%,78%) 53%,
														hsl(0,0%,70%)100%);						
	
	background-image: 	repeating-linear-gradient(-45deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   0.1%, hsla(0,0%,100%, .1) 0.15%),					
						repeating-linear-gradient(-45deg, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   0.05%, hsla(0,0%,  0%,.03) 0.1%),					
						repeating-linear-gradient(-45deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 0.01%, hsla(0,0%,100%,.15) 0.02%),
						linear-gradient(-90deg, 	hsl(0,0%,78%)  0%, 
														hsl(0,0%,90%) 47%, 
														hsl(0,0%,78%) 53%,
														hsl(0,0%,70%)100%);			
												
	background-image: 	-webkit-repeating-linear-gradient(-45deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   0.1%, hsla(0,0%,100%, .1) 0.15%),					
						-webkit-repeating-linear-gradient(-45deg, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   0.05%, hsla(0,0%,  0%,.03) 0.1%),					
						-webkit-repeating-linear-gradient(-45deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 0.01%, hsla(0,0%,100%,.15) 0.02%),
						-webkit-linear-gradient(-90deg, 	hsl(0,0%,78%)  0%, 
														hsl(0,0%,90%) 47%, 
														hsl(0,0%,78%) 53%,
														hsl(0,0%,70%)100%);

	box-shadow: 	inset 0 -180px 20px rgba(0,0,0,0.15),
	 				inset 3px 3px 1px rgba(255,255,255,0.5), 
					inset -3px -3px 1px rgba(0,0,0,0.33), 
	 				inset 0 40px 50px rgba(255,255,255,0.66), 
					0 1px 20px rgba(0,0,0,0.5);
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset,img {
	border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
	font-weight: normal;
}

ol,ul {
	list-style: none;
}

caption,th {
	text-align: left;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}

q:before,q:after {
	content: '';
}

abbr,acronym {
	border: 0;
}

* body,* table.kanbanTable td {
	font-size: inherit;
}

/** Add css rules here for your application. */
/** Example rules used by the template application (remove for your app) */
h1 {
	font-size: 2em;
	font-weight: bold;
	color: #777777;
	margin: 40px 0px 70px;
	text-align: center;
}

html body {
	background: #f1eee0 url(img/body-bg.jpg) repeat;
	font-size: 0.625em;
}

.login {
	vertical-align: top;
	display: inline-block;
}

.login input {
	background-color: rgba(0,0,0,0.1);
    border: 0;
    font: bold 1.4em Arial,Helvetica,Sans-serif;
    vertical-align: middle;
    color: #777;
    width:10em;
    height: 1em;
    padding: 0.6em 1.5em 0.6em 1em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
   }

.login input:focus {
	color: #6a6f75;
	width: 15em;
	border: 1px solid #9ecaed;
	-webkit-box-shadow: 0px 0px 1em #007eff;
	-moz-box-shadow: 0px 0px 1em #007eff;
	box-shadow: 0px 0px 1em #007eff;
	text-shadow: 0 2px 1em rgba(0, 0, 0, 0.1);
	outline: none;
}
	
.login button {
	opacity: 0.5;
	font-size: 1em;
	margin-left: -2.5em;
	height: 2em;
	width: 2em;
	vertical-align: middle;
	color: #666;
		background: -moz-linear-gradient(
		top,
		#f5f5f5 0%,
		#999999);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#f5f5f5),
		to(#999999));
	border-radius: 2em;
	-moz-border-radius: 2em;
	-webkit-border-radius: 2em;
	border: 1px solid #999999;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
}

.login button:hover {
	opacity: 0.8;
}

.kanbanStageHeader {
	position: absolute;
	color: #5C9DB4;
	font-family: 'Rock Salt', cursive;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	height: 5em;
	margin-left: 3px;
	width: 10em;
}

.kanbanStageColumn {
	background: transparent;
	width: 13em;
	height: 10em;
	overflow: visible !important;
}
 
.kanbanStageColumn:not(.first) {
	border: 9px dashed #CCC;
	-moz-border-image: url(img/green-board-line.png) 0 0 0 9 round;
	-webkit-border-image: url(img/green-board-line.png) 0 0 0 9 round;
	-o-border-image: url(img/green-board-line.png) 0 0 0 9 round;
	border-image: url(img/green-board-line.png) 0 0 0 9 round;
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
}

.kanbanStageColumn.buffer {
	background-color: rgba(200, 200, 225, 0.2);
	-moz-background-clip: content-box;
	-webkit-background-clip: content-box;
	-o-background-clip: content-box;
	background-clip: content-box;
}

.taskEditionDialog.dialogContent { /* TODO let it shine ;) */
	margin: 0px;
}

.sendButton {
	display: block;
	font-size: 16pt;
}

/** Most GWT widgets already have a style name defined */
.gwt-DialogBox {
	width: 400px;
}

.dialogVPanel {
	margin: 5px;
}

.serverResponseLabelError {
	color: red;
}

/** Set ids using widget.getElement().setId("idOfElement") */
#closeButton {
	margin: 15px 6px 6px;
}

/* Reset */
.user-story *,.task * {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	overflow: visible !important;
}

.user-story,.task,.task {
	font-family: 'Give You Glory', cursive;
	position: relative;
	width: 12.9em;
	height: 7.5em;
	border: 1px solid #e3e3e3;
	background-size: auto 1.7em;
	-moz-transition: width 0.5s ease-in-out, height 0.5s ease-in-out,
		font-size 0.5s ease-in-out;
	-ms-transition: width 0.5s ease-in-out, height 0.5s ease-in-out,
		font-size 0.5s ease-in-out;
	-o-transition: width 0.5s ease-in-out, height 0.5s ease-in-out,
		font-size 0.5s ease-in-out;
	-webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out,
		font-size 0.5s ease-in-out;
	transition: width 0.5s ease-in-out, height 0.5s ease-in-out,
		font-size 0.5s ease-in-out;
	font-size: 100%;
}

/* background grey lines and borders */
.user-story {
	background-color: #faf8e5;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-image: 
		-moz-linear-gradient(0deg, transparent 20px, #e99 20px, #e99 21px, transparent 21px, transparent 22px,  #e99 22px, #e99 23px, transparent 23px),
		-moz-linear-gradient(#ddd .1em, transparent .1em);
	background-image: 
		-ms-linear-gradient(0deg, transparent 20px, #e99 20px, #e99 21px, transparent 21px, transparent 22px,  #e99 22px, #e99 23px, transparent 23px),
		-ms-linear-gradient(#ddd .1em, transparent .1em);
	background-image: 
		-o-linear-gradient(0deg, transparent 20px, #e99 20px, #e99 21px, transparent 21px, transparent 22px,  #e99 22px, #e99 23px, transparent 23px),
		-o-linear-gradient(#ddd .1em, transparent .1em);
	background-image: 
		-webkit-linear-gradient(0deg, transparent 20px, #e99 20px, #e99 21px, transparent 21px, transparent 22px,  #e99 22px, #e99 23px, transparent 23px),
		-webkit-linear-gradient(#ddd .1em, transparent .1em);
	background-image: 
		linear-gradient(0deg, transparent 20px, #e99 20px, #e99 21px, transparent 21px, transparent 22px,  #e99 22px, #e99 23px, transparent 23px),
		linear-gradient(#ddd .1em, transparent .1em);	                  
	background-size: 100% 1.55em;
}

/* Curled borders */
.task {
	-moz-border-radius: 0 0 120px 120px/0 0 6px 6px;
	border-radius: 0 0 120px 120px/0 0 6px 6px;
}

.expand {
	opacity: 0.2;
	background: transparent
		url()
		no-repeat right 0px;
}

.expand:hover {
	opacity: 0.4;
}

.expanded .expand {
	background: transparent
		url()
		no-repeat right 0px;
}

.yellow {
	background-color: #faf8ba;
}

.green {
	background-color: #daf8da;
}

.blue {
	background-color: #baeaba;
}

.red {
	background-color: #fadaea;
}

.expanded .user-story,.expanded .task {
	width: 30em;
	height: 15em;
	font-size: 130%;
}

.expanded {
	z-index:6;	
} 

.user-story .description,.task .description {
	opacity: 0;
	line-height: 1em;
	color: #888;
	font-size: 1.5em;
	padding-left: 2em;
	margin-top: 1em;
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-ms-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
	-webkit-transition-timing-function: cubic-bezier(0, 1, 0, 1);
	-moz-transition-timing-function: cubic-bezier(0, 1, 0, 1);
	-ms-transition-timing-function: cubic-bezier(0, 1, 0, 1);
	-o-transition-timing-function: cubic-bezier(0, 1, 0, 1);
	transition-timing-function: cubic-bezier(0, 1, 0, 1);
}

.user-story .description textarea,.task .description textarea {
	line-height: 1em;
	color: #888;
	font-family: 'Give You Glory', cursive;
	height: 5em !important;
	padding: 1px;
}

.expanded .user-story .description,.expanded .task .description {
	opacity: 1;
	-webkit-transition-timing-function: cubic-bezier(1, 0, 1, 0);
	-moz-transition-timing-function: cubic-bezier(1, 0, 1, 0);
	-ms-transition-timing-function: cubic-bezier(1, 0, 1, 0);
	-o-transition-timing-function: cubic-bezier(1, 0, 1, 0);
	transition-timing-function: cubic-bezier(1, 0, 1, 0);
}

/* title */
.user-story .title,.task .title {
	font-size: 170%;
	margin: 0em 0 -0.2em 1.5em;
}

/* vertical lines */
.user-stsory .title:after {
	content: '';
	font-size: 50%;
	height: 100%;
	width: 0.2em;
	border-left: 0.18em solid #ef8b8b;
	border-right: 0.18em solid #ef8b8b;
	position: absolute;
	left: 2.5em;
	top: 0;
}

.user-story .name,.task .name {
	line-height: 1em;
	color: #4d84c8;
	font-size: 1.5em;
	padding-left: 2em;
}

.user-story .name textarea,.task .name textarea {
	color: #4d84c8;
	font-family: 'Give You Glory', cursive;
	line-height: 1em;
	padding: 1px;
}

.flipcard {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.flipcard .front,.flipcard .back {
	-webkit-perspective: 600;
	-moz-perspective: 600;
	-o-perspective: 600;
	perspective: 600;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	overflow: visible !important;
}

.flipcard .front {
	opacity: 1;
	position: absolute !important;
	border: 1px solid #ccc;
	top: 0;
	left: 0;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.flipcard .back {
	opacity: 0;
	position: absolute !important;
	top: 0;
	left: 0;
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.flipcard.flipped .back {
	opacity: 1;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.flipcard.flipped .front {
	opacity: 0;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

/* tape */
.user-story .title:before {
	content: '';
	font-size: 50%;
	position: absolute;
	top: -0.8em;
	left: 6em;
	width: 7em;
	height: 2.5em;
	background-color: #fff;
	opacity: 0.6;
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 1px 0px #cccccc;
	-moz-box-shadow: 0px 0px 1px 0px #cccccc;
	box-shadow: 0px 0px 1px 0px #cccccc;
	-webkit-transform: rotate(-2deg) skew(0, 0) translate(0%, -5px);
	-moz-transform: rotate(-2deg) skew(0, 0) translate(0%, -5px);
	-o-transform: rotate(-2deg) skew(0, 0) translate(0%, -5px);
	transform: rotate(-2deg) skew(0, 0) translate(0%, -5px);
}

/************************************************************************************
smaller than 480
*************************************************************************************/
@media screen and (max-width: 480px) {

	/* disable webkit text size adjust (for iPhone) */
	html {
		-webkit-text-size-adjust: none;
	}
}

